// Vue.use()
// app.use()
import { App } from 'vue'
import XtxSkeleton from './skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImage from '@/assets/images/200.png'
import Bread from './bread/index.vue'
import BreadItem from './bread/Item.vue'
import City from './city/index.vue'
import NumBox from './numbox/index.vue'
import Button from './button/index.vue'
import Checkbox from './Checkbox/index.vue'

export default {
  // Vue2: 传入 Vue 对象
  // Vue3: 传入 app 对象
  install(app: App) {
    // 自动执行
    // console.log('安装插件中...')
    // 全局注册组件
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMore)
    app.component(Bread.name, Bread)
    app.component(BreadItem.name, BreadItem)
    app.component(City.name, City)
    app.component(NumBox.name, NumBox)
    app.component(Button.name, Button)
    app.component(Checkbox.name, Checkbox)

    // 全局注册指令
    // 参数1: 指令名
    // 参数2: 配置项
    app.directive('lazy', {
      // Vue2: 当绑定的元素插入到 DOM 中时执行, inserted
      // inserted(el, binding) {}
      // Vue3: 改为了 mounted
      mounted(el, binding) {
        // el: 当前指令绑定的 DOM 元素
        // console.log(el, binding)
        // 逻辑: 当 el 进入可视区后, 给它设置 src 属性
        useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
          }
        })

        // 对图片进行错误的处理
        // onerror 事件: 图片加载失败时触发
        el.onerror = () => {
          // console.log('我加载失败了')
          // el.src = '@/assets/images/200.png'
          // src 只能设置两种值: URL Base64 字符串
          // console.log(defaultImage)
          el.src = defaultImage
        }
      }
    })
  }
}